<template>
	<view class="uni-calendar">

		<view class="uni-calendar__content">

			<view class="uni-calendar__header">
				<view class="uni-calendar__header-btn-box" @click.stop="pre">
					<view class="uni-calendar__header-btn uni-calendar--left"></view>
				</view>
				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
					<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
				</picker>
				<view class="uni-calendar__header-btn-box" @click.stop="next">
					<view class="uni-calendar__header-btn uni-calendar--right"></view>
				</view>
				<text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text>

			</view>
			<view class="uni-calendar__box">
				<view v-if="showMonth" class="uni-calendar__box-bg">
					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
				</view>
				<view class="uni-calendar__weeks">
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{monText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
					</view>
					<view class="uni-calendar__weeks-day">
						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
					</view>
				</view>
				<view v-for="(item,weekIndex) in weeks" :key="weekIndex">
					<view style="display: flex;flex-direction: column;">
						<view class="uni-calendar__weeks" v-if="showPlanByWeek(item.weeks)">
							<view class="uni-calendar__weeks-item" v-for="(day,weeksIndex) in item.weeks"
								:key="weeksIndex">
								<calendar-item class="uni-calendar-item--hook" :weeks="day" :calendar="calendar"
									:lunar="lunar" @change="choiceDate"></calendar-item>
								<!--日报展示-->
								<view v-if="!day.disable&&showDay" :data-status="day.isHoliday ==1?'4':day.dayStatus"
									class="uni-calendar-item" @click="datePlanClick(day,item)">
									{{getDayStatus(day)}}
								</view>
							</view>
						</view>
						<!--周计划展示-->
						<view class="plan-bg" :data-status="item.dataState" v-if="showPlan&&showPlanByWeek(item.weeks)"
							@click="weekPlanClick(item)">
							{{getPlaneName(item,weekIndex)}}
						</view>
						<view v-if="!showPlan &&showPlanByWeek(item.weeks)" class="line"></view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Calendar from './util.js';
	import CalendarItem from './calendar-item.vue'

	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import i18nMessages from './i18n/index.js'

	const {
		t
	} = initVueI18n(i18nMessages)

	/**
	 * Calendar 日历

	 * @property {String} date 自定义当前时间，默认为今天
	 * @property {String} text.size 文字大小
	 * @property {String} text.color 文字颜色
	 * @property {Boolean} lunar 显示农历
	 * @property {Boolean} showPlan 展示周计划
	 * @property {Boolean} showDay 展示日报
	 * @property {String} startDate 日期选择范围-开始日期
	 * @property {String} endDate 日期选择范围-结束日期
	 * @property {Boolean} range 范围选择
	 * @property {Boolean} showMonth 是否选择月份为背景
	 * @property {Boolean} needState 周计划日报是否需要审核
	 * @event {Function} change 日期改变，
	 * @event {Function} monthSwitch 切换月份时触发
	 */
	export default {
		components: {
			CalendarItem
		},
		emits: ['change', 'monthSwitch', 'weekPlanClick', 'datePlanClick'],
		props: {
			date: {
				type: String,
				default: ''
			},

			lunar: {
				type: Boolean,
				default: false
			},
			startDate: {
				type: String,
				default: ''
			},
			endDate: {
				type: String,
				default: ''
			},
			range: {
				type: Boolean,
				default: false
			},
			showMonth: {
				type: Boolean,
				default: false
			},
			showPlan: {
				type: Boolean,
				default: true
			},
			showDay: {
				type: Boolean,
				default: true
			},
			needState: {
				type: Boolean,
				default: true
			},

		},
		data() {
			return {
				weeks: [],
				planList: [],
				calendar: {},
				nowDate: '',
			}
		},
		computed: {
			/**
			 * for i18n
			 */


			todayText() {
				return t("uni-calender.today")
			},
			monText() {
				return t("uni-calender.MON")
			},
			TUEText() {
				return t("uni-calender.TUE")
			},
			WEDText() {
				return t("uni-calender.WED")
			},
			THUText() {
				return t("uni-calender.THU")
			},
			FRIText() {
				return t("uni-calender.FRI")
			},
			SATText() {
				return t("uni-calender.SAT")
			},
			SUNText() {
				return t("uni-calender.SUN")
			},
		},
		watch: {
			date(newVal) {
				// this.cale.setDate(newVal)
				this.init(newVal)
			},
			startDate(val) {
				this.cale.resetSatrtDate(val)
				this.cale.setDate(this.nowDate.fullDate)
				this.weeks = this.cale.weeks
			},
			endDate(val) {
				this.cale.resetEndDate(val)
				this.cale.setDate(this.nowDate.fullDate)
				this.weeks = this.cale.weeks
			},

			//计划数据
			planList(newVal) {
				console.log(this.needState)
				this.cale.setPlanList(this.nowDate.fullDate, newVal, this.needState)
				this.weeks = this.cale.weeks
			}

		},
		created() {
			// console.log(this.startDate)
			this.cale = new Calendar({
				startDate: this.startDate,
				endDate: this.endDate,
				range: this.range,
			})
			this.init(this.date)
		},
		methods: {
			//
			setPlanList(list) {
				this.planList = list
			},
			//当前周 是否展示周计划(当周有一天属于本月则展示，否则隐藏)
			showPlanByWeek(weeks) {
				let show = false
				weeks.forEach(item => {
					if (!item.disable) {
						show = true
					}
				})
				return show
			},
			// 取消穿透
			clean() {},
			bindDateChange(e) {
				const value = e.detail.value + '-1'
				this.setDate(value)

				const {
					year,
					month
				} = this.cale.getDate(value)
				this.$emit('monthSwitch', {
					year,
					month
				})
			},
			/**
			 * 初始化日期显示
			 * @param {Object} date
			 */
			init(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.calendar = this.cale.getInfo(date)
			},

			/**获取当前计划的状态
			 * @param {Object} item
			 * @param {Object} weekindex
			 */
			getPlaneName(item, weekIndex) {

				var status = '未提交' //默认未提交
				if (item.dataState != 'undefined') {
					if (item.dataState == 0) {
						status = '待审批'
					} else if (item.dataState == 1) {
						// status = '审批通过'
						status = '查看周计划'
					} else if (item.dataState == 2) {
						status = '审批驳回'
					}
				}
				return status;

			},
			//获取每天的状态
			getDayStatus(day) {
				// console.log(day)
				var statusName = '未提交'
				if (day.isHoliday && day.isHoliday == 1) {
					statusName = "休假"
				} else {
					if (day.dayStatus == 0) {
						statusName = '未提交'
					} else if (day.dayStatus == 1) {
						statusName = '待审批'
					} else if (day.dayStatus == 2) {
						// statusName = '已通过'
						statusName = '查看'
					} else if (day.dayStatus == 3) {
						statusName = '已驳回'
					}
				}
				return statusName
			},
			/**
			 * 周计划点击事件
			 */
			weekPlanClick(item) {
				console.log(item)
				const weeks = item.weeks
				this.$emit('weekPlanClick', {
					coordinateHelp: item.coordinateHelp,
					weekWorkPlan: item.weekWorkPlan,
					workSummary: item.workSummary,
					dataState: item.dataState,
					attachIds: item.attachIds,
					// fileUrl: item.fileUrl,
					beginDate: weeks[0].fullDate,
					endDate: weeks[6].fullDate,
					planId: item.planId
				})

			},
			/**
			 * 日报
			 */
			datePlanClick(day, item) {
				console.log(item)
				this.$emit('datePlanClick', {
					...day,
					planCode: item.planCode,
					dataState: item.dataState,
					beginDate: item.weeks[0].fullDate,
					endDate: item.weeks[6].fullDate
				})
			},

			/**
			 * 变化触发
			 */
			change() {
				this.setEmit('change')
			},
			/**
			 * 选择月份触发
			 */
			monthSwitch() {
				let {
					year,
					month
				} = this.nowDate
				this.$emit('monthSwitch', {
					year,
					month: Number(month)
				})
			},
			/**
			 * 派发事件
			 * @param {Object} name
			 */
			setEmit(name) {
				let {
					year,
					month,
					date,
					fullDate,
					lunar,
					extraInfo
				} = this.calendar
				this.$emit(name, {
					range: this.cale.multipleStatus,
					year,
					month,
					date,
					fulldate: fullDate,
					lunar,
					extraInfo: extraInfo || {}
				})
			},
			/**
			 * 选择天触发
			 * @param {Object} weeks
			 */
			choiceDate(weeks) {
				if (weeks.disable) return
				this.calendar = weeks
				// 设置多选
				this.cale.setMultiple(this.calendar.fullDate)
				this.weeks = this.cale.weeks
				this.change()
			},
			/**
			 * 回到今天
			 */
			backToday() {
				const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
				const date = this.cale.getDate(new Date())
				const todayYearMonth = `${date.year}-${date.month}`

				this.init(date.fullDate)

				if (nowYearMonth !== todayYearMonth) {
					this.monthSwitch()
				}

				this.change()
			},
			/**
			 * 上个月
			 */
			pre() {
				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
				this.setDate(preDate)
				this.monthSwitch()

			},
			/**
			 * 下个月
			 */
			next() {
				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
				this.setDate(nextDate)
				this.monthSwitch()
			},
			/**
			 * 设置日期
			 * @param {Object} date
			 */
			setDate(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.cale.getInfo(date)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
	$uni-border-color: #EDEDED;
	$uni-text-color: #111;
	$uni-bg-color-hover: #f1f1f1;
	$uni-font-size-base: 34rpx;
	$uni-text-color-placeholder: #808080;
	$uni-color-subtitle: #555555;
	$uni-text-color-grey: #999;

	.uni-calendar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-calendar__mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		/* #ifndef APP-NVUE */
		z-index: 99;
		/* #endif */
	}

	.uni-calendar--mask-show {
		opacity: 1
	}

	.uni-calendar--fixed {
		position: fixed;
		/* #ifdef APP-NVUE */
		bottom: 0;
		/* #endif */
		left: 0;
		right: 0;
		transition-property: transform;
		transition-duration: 0.3s;
		transform: translateY(460px);
		/* #ifndef APP-NVUE */
		bottom: calc(var(--window-bottom));
		z-index: 99;
		/* #endif */
	}

	.uni-calendar--ani-show {
		transform: translateY(0);
	}

	.uni-calendar__content {
		background-color: #fff;
	}

	.uni-calendar__header {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50px;
		// border-bottom-color: $uni-border-color;
		// border-bottom-style: solid;
		// border-bottom-width: 1px;
		// box-shadow: 0 2px 30px rgba(100, 100, 100, 0.15)
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
	}

	.uni-calendar--fixed-top {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		border-top-color: $uni-border-color;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-calendar--fixed-width {
		width: 50px;
	}


	.uni-calendar__backtoday {
		position: absolute;
		right: 0;
		top: 15rpx;
		padding: 0 5px;
		padding-left: 15px;
		height: 35px;
		line-height: 35px;
		font-size: 28rpx;
		border-top-left-radius: 35px;
		border-bottom-left-radius: 35px;
		color: $uni-text-color;
		background-color: $uni-bg-color-hover;
	}

	.uni-calendar__header-text {
		text-align: center;
		width: 100px;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		font-weight: bold;
	}

	.uni-calendar__header-btn-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}


	.uni-calendar__header-btn {
		width: 11px;
		height: 11px;
		border-left-color: $uni-text-color-placeholder;
		border-left-style: solid;
		border-left-width: 2px;
		border-top-color: $uni-color-subtitle;
		border-top-style: solid;
		border-top-width: 2px;
	}

	.uni-calendar--left {
		transform: rotate(-45deg);
	}

	.uni-calendar--right {
		transform: rotate(135deg);
	}


	.uni-calendar__weeks {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-calendar__weeks-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.uni-calendar-week-plane {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(28, 37, 58, 0.85);
		width: 94rpx;
		height: 40rpx;
		background: rgba(84, 185, 204, 0.15);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		opacity: 0.8;
	}

	.uni-calendar__weeks-day {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 50px;
		border-bottom-color: #F5F5F5;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	.uni-calendar__weeks-day-text {
		font-size: 34rpx;
	}

	.uni-calendar__box {
		position: relative;
	}

	.uni-calendar__box-bg {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.uni-calendar__box-bg-text {
		font-size: 200px;
		font-weight: bold;
		color: $uni-text-color-grey;
		opacity: 0.1;
		text-align: center;
		/* #ifndef APP-NVUE */
		line-height: 1;
		/* #endif */
	}

	.uni-calendar-item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		margin-top: 10rpx;
		color: rgba(28, 37, 58, 0.85);
		width: 94rpx;
		height: 48rpx;
		background: rgba(84, 185, 204, 0.15);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		opacity: 0.8;
	}

	//驳回
	.uni-calendar-item[data-status='3'] {
		background-color: #E5E6EB;
		color: #E02020
	}

	//通过
	.uni-calendar-item[data-status='2'] {
		background-color: #95C6C6;
		color: rgba(28, 37, 58, 0.85);
	}

	//审核中
	.uni-calendar-item[data-status='1'] {
		background-color: #F3E9CC;
		color: rgba(28, 37, 58, 0.85);
	}

	//休假
	.uni-calendar-item[data-status='4'] {
		background-color: #E5E6EB;
		color: #E02020
	}


	.plan-bg {
		flex-grow: 1;
		margin-top: 10rpx;
		height: 52rpx;
		padding-left: 15rpx;
		background: rgba(179, 220, 246, 0.6);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #1C253A;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.line {
		height: 1rpx;
		margin-top: 10rpx;
		background-color: #F5F5F5;
	}

	//待审核
	.plan-bg[data-status='0'] {
		background-color: #F3E9CC;
		color: #1C253A
	}

	//通过
	.plan-bg[data-status='1'] {
		background-color: #95C6C6;

		color: rgba(28, 37, 58, 0.85);
	}

	//驳回
	.plan-bg[data-status='2'] {
		background-color: #E5E6EB;
		color: #E02020
	}
</style>